<template>
	<div style="position: relative;">
		<van-cell-group :border="false">
		  <van-field v-model="value" :required="isMustFill" :fieldName="fieldName" :label="lableName" input-align="right" @input="write" :placeholder="`输入erp,最多${searchUserAmount}个`" />
		</van-cell-group>		
		<ul class="box" ref="box" v-if="isShow">
			<li v-for="item in searchList" :key="item.username" @click="chooseItem(item)">{{item.username}} {{item.relname}}</li>
		</ul>
		<div class="show-erp">
			<div class="show-erp-item" v-for="item in erpList" :key="item.username">
				<div @click="deleteItem(item)"><van-icon class="close" name="close" />{{item.relname}}({{item.username}})</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {searchUser} from '@request/api.js'
	export default{
		data(){
			return{
				isShow:false,
				value:'',
				placeholder:'',
				searchList:[],
				erpList:[],
				regex:/(.+)?(?:\(|（)(.+)(?=\)|）)/ 
			}
		},
		mounted() {
			// 默认值注释，需确认
			if(this.fieldDefaultValue !== ''){
				let arr = this.fieldDefaultValue.split(",") 				
				arr.forEach(item=>{
					// console.log(this.regex.exec(item))
					const erp = this.regex.exec(item)
					this.erpList.push({
						relname:erp[1],
						username:erp[2]
					})
				})
			}
			document.addEventListener('click', this.handleDocumentClick)//给document添加一个点击事件
		},
		props:['fieldName','lableName','searchUserAmount','isMustFill','fieldDefaultValue'],
		methods:{
			getParenthesesStr(text) {
			    let result = ''
			    if (isObjEmpty(text))
			        return result
			    let regex = /\((.+?)\)/g;
			    let options = text.match(regex)
			    if (!isObjEmpty(options)) {
			        let option = options[0]
			        if (!isObjEmpty(option)) {
			            result = option.substring(1, option.length - 1)
			        }
			    }
			    return result
			},
			handleDocumentClick(e) {
				// console.log(this.$refs.box);			
				if(this.$refs.box!==undefined){
					if(!this.$refs.box.contains(e.target)){
					    this.isShow = false;
					}
				}
			},
			write(){				
				// 请求
				this.$axios.post(`/api/searchUser?_form=${this.$route.query.form_id}&_fieldName=${this.fieldName}&_keyWord=${this.value}`).then(res=>{
					if(res.data.code === 0){
						this.searchList = res.data.data
						this.isShow = true
					}
				})
			},
			chooseItem(item){
				this.value = ''
				if(this.erpList.length === 0){
					this.isShow = false
					this.erpList.push(item)
				}else{
					if(this.erpList.length<=4){
						var result = this.erpList.findIndex(e =>{
						    return e.username === item.username
						});
						// console.log(result)
						if(result === -1){
							this.isShow = false
							this.erpList.push(item)
						}else{
							this.$toast('不能选择重复的人！')
						}
					}else{
						this.$toast('最多选择5个！')
					}
				}						
			},
			deleteItem(item){
				this.erpList.splice(this.erpList.findIndex(e => e.username === item.username), 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100vw;
		position: absolute;
		left: 0;
		background-color: #F5FBFC;
		z-index: 90;
	}
	.box li{
		height: 44px;
		line-height: 44px;
		font-size: vw(14);
		padding-left: 14px;
	}
	.show-erp{
		padding: 10px 16px;
		background-color: #FFFFFF;
	}
	.show-erp-item{
		margin-bottom: vw(10);
	}
	.show-erp-item div{
		border: none;
		display:inline-block;
		width: auto;
		background-color: #C8C9CC;
		padding: vw(6) vw(35) vw(6) vw(15);
		border-radius: 3px;
		font-size: vw(14);
		position: relative;
	}
	.close{
		font-size: vw(16);
		color: red;
		position: absolute;
		right: vw(10);
		top: vw(8);
	}
</style>
